import React, { useState } from 'react';
import { Input } from '../../nui';
import { loc } from '../../local';

const PanelTitle = ({ children, left, right, className, cl="orange" }) => {
    return (
        <div className={`bg-${cl}-200`}>
            <div className="text-base flex justify-between py-1 items-center">
                <div className={ "inline-flex px-4 items-center " + className }>
                    {left}
                </div>
                <div className="inline-flex px-4 items-center">
                    {right}
                </div>
            </div>
            <div className="ml-4">
                {children}
            </div>
        </div>
    );
};

const PanelFind = ({ children, left, right, className, cl="gray", hcmd, width="w-64" }) => {
    const [filter, setFilter] = useState("");

    const hfind = (v) => {
        setFilter(v);
        if (hcmd) {
            hcmd(v);
        }
    };

    return (
        <div className={`bg-${cl}-200`}>
            <div className="text-base flex justify-between py-1 items-center">
                <div className={ "inline-flex px-4 items-center " + className }>
                    {left}
                </div>
                <div className="inline-flex px-4 items-center">
                    <div className="mr-4">
                        <Input value={filter} label={loc("zjgs")} name="filter" mg="dense" hcmd={(n, v) => hfind(v.trim())} width={width}/>
                    </div>
                    {right}
                </div>
            </div>
            <div className="ml-4">
                {children}
            </div>
        </div>
    );
};

const CurTip = ({ label, cur, children }) => {
    if (children) {
        return <div>{`${label} : ${cur}`}<span className="mx-4">{">>"}</span>{children}</div>;
    }

    return <div>{`${label} : ${cur}`}</div>;
};

const PanelBt = ({ width="w-24", disabled=false, children, st, name, hcmd, select=false, className="" }) => {
    const color = select ? "yellow" : "blue";

    const sty = () => {
        let ret = `bg-${color}-600 hover:bg-${color}-700 rounded-lg my-1 `;
        if (disabled) {
            ret += "opacity-50 cursor-not-allowed ";
        }

        return ret;
    };

    return (
        <button className={sty() + className} disabled={disabled || false} name={name} onClick={hcmd}>
            <div className={"mt-3 mb-4 text-white font-bold text-xl " + width}>
                {children}
            </div>
        </button>
    );
};

const Panel = ({ children, label, cl="yellow", subtitle, action }) => (
    <div className={`flex justify-between bg-${cl}-100 py-1 items-center text-base mb-4 mx-4 rounded-lg border border-${cl}-500`}>
        <div className={ "inline-flex px-4 items-center"}>
            <div className="mr-8 text-1xl">
                <div>{label}</div>
                <div>{subtitle}</div>
            </div>
            {children}
        </div>
        <div className={`pl-4 border-l border-${cl}-500`}>
            {action}
        </div>
    </div>
);

export {Panel, PanelBt, CurTip, PanelFind, PanelTitle};
